<!--
* @description 警情处理
* @author zywu
* @date 2021/01/05 20:11:15
!-->
<template>
  <li class="item">
    <p class="item-tt">接处警回顾</p>
    <div class="policeView">
      <p class="policeTt">
        <img
          src="/ilink-app-h5-zd/static/img/ilink_1565765076954.png"
          style="vertical-align:middle;width:25px;height:25px;"
        />警情数量变化
      </p>
      <div id="policeChart" class="policeChart"></div>
    </div>
    <div>
      <p class="policeTt">
        <img
          src="/ilink-app-h5-zd/static/img/ilink_1565765076954.png"
          style="vertical-align:middle;width:25px;height:25px;"
        />警情处理
      </p>
      <div id="policeDeil" class="policeDeil"></div>
    </div>
  </li>
</template>

<script>
export default {
  props: {
    reportData: {
      type: Object,
      default: function () {
        return {}
      },
    },
  },
  data() {
    return {}
  },

  components: {},

  computed: {},

  created() {
    var changeOfPoliceSituation = this.reportData.changeOfPoliceSituation //接处警回顾
    var thisWeekData = []
    for (
      var times = 0;
      times < changeOfPoliceSituation.thisWeek.length;
      times++
    ) {
      thisWeekData[times] = changeOfPoliceSituation.thisWeek[times].value
    }
    this.initPoliceChart(thisWeekData)
  },

  mounted() {},

  methods: {
    initPoliceChart(thisWeek) {
      let myChart = echarts.init(document.getElementById('policeChart'))
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            //type: 'cross',
            label: {
              backgroundColor: '#6a7985',
            },
          },
        },
        grid: {
          left: '4%',
          right: '4%',
          bottom: '20%',
          containLabel: false,
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            axisLabel: {
              show: true,
              textStyle: {
                color: '#999999',
              },
            },
            axisLine: {
              lineStyle: {
                color: '#999999',
                width: 1, //这里是为了突出显示加上的
              },
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            show: false,
            minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数。
            axisLabel: {
              formatter: '{value}',
            },
          },
        ],
        series: [
          {
            name: '数量',
            type: 'line',
            stack: '总量',
            smooth: true,
            itemStyle: {
              normal: {
                //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: '#D0D7FF', // 0% 处的颜色
                  },
                  {
                    offset: 0.5,
                    color: '#D0D7FF', // 50% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#D0D7FF', // 100% 处的颜色
                  },
                ]), //背景渐变色
                lineStyle: {
                  // 系列级个性化折线样式
                  width: 0,
                  type: 'solid',
                  color: '#D0D7FF',
                },
              },
              emphasis: {
                color: '#D0D7FF',
                lineStyle: {
                  // 系列级个性化折线样式
                  width: 0,
                  type: 'dotted',
                  color: '#D0D7FF', //折线的颜色
                },
              },
            }, //线条样式
            symbolSize: 0, //折线点的大小
            areaStyle: { normal: {} },
            data: thisWeek,
          },
        ],
      }
      myChart.setOption(option, true)
    },
  },
}
</script>
<style lang='scss'>
</style>